<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!-- 
        表格
            - 在网页中使用table标签来创建表格
            - 表格的行数由tr的数量决定
            - 表格的列数由td最多的tr来决定
            - 在网页中表格主要用来显示一些结构化的数据
                - 课程表
                - 对账单
                - 报价单
                - 人名单
                ....
     -->
    <table border="1">
        <!-- 
            在table中使用tr来表示表格中的一行
         -->
        <tr>
            <!-- 
                在tr中使用td来表示表格中的单元格
             -->
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>

        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <!-- rowspan 纵向的合并单元格  -->
            <td rowspan="2">B4</td>
        </tr>

        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
        </tr>

        <tr>
            <td>D1</td>
            <td>D2</td>
            <!-- colspan 横向的合并单元格 -->
            <td colspan="2">D3</td>
        </tr>

    </table>

    <hr>

    <!-- 
        长表格
     -->
    <table border="1">

        <!-- 
            <thead></thead>
                - thead表示表格的头部，用来放头部的tr
            <tbody></tbody>
                - tbody表示表格的主要内容
            <tfoot></tfoot> 
                - tfoot表示的是表格底部
            <th>
                - 表示的是表头的单元格
            <caption>
                - 用来设置表格的标题
    -->

    <caption>学生名单</caption>

    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
        

    <tbody>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>18</td>
        </tr>

        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>28</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>38</td>
        </tr>
    </tbody>
        

    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td>合计</td>
            <td>3人</td>
        </tr>
    </tfoot>
        
    </table>



</body>
</html>